<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>Extend/echarts/echartLayer/EchartLayer.js - sss</title>
    
    <meta name="description" content="aaaa" />
    
        <meta name="keywords" content="cccc" />
        <meta name="keyword" content="cccc" />
    
    
    
    <meta property="og:title" content="arcgis4.x 简单的操作工具"/>
    <meta property="og:type" content="website"/>
    <meta property="og:image" content=""/>
    <meta property="og:site_name" content="CPC"/>
    <meta property="og:url" content="https://gitee.com/CPC1994/arcgis4.X"/>
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav class="wrap">
    
    <input type="text" id="nav-search" placeholder="Search" />
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="EchartLayer.html">EchartLayer</a><ul class='methods'><li data-type='method' style='display: none;'><a href="EchartLayer.html#init">init</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setBaseMap">setBaseMap</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setChartOption">setChartOption</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setVisible">setVisible</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#refreshBegin">refreshBegin</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#refreshing">refreshing</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#refreshEnd">refreshEnd</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#on">on</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#off">off</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#setCharts">setCharts</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#createLayer">createLayer</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#removeLayer">removeLayer</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#startMapEventListeners">startMapEventListeners</a></li><li data-type='method' style='display: none;'><a href="EchartLayer.html#getE3CoordinateSystem">getE3CoordinateSystem</a></li></ul></li><li></li><li><a href="LayerUtil.html">LayerUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="LayerUtil.html#lazyLoadingLayer">lazyLoadingLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyLayer">applyLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyMapImageLayer">applyMapImageLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyTileLayer">applyTileLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyFeatureLayer">applyFeatureLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applySceneLayer">applySceneLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#applyElevationLayer">applyElevationLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#switchLayer">switchLayer</a></li><li data-type='method' style='display: none;'><a href="LayerUtil.html#getLayerByUniqueId">getLayerByUniqueId</a></li></ul></li><li></li><li><a href="ViewUtil.html">ViewUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ViewUtil.html#flyToPosition3D">flyToPosition3D</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#flyToPoint2D">flyToPoint2D</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#applyMapView">applyMapView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#removeMapView">removeMapView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#applySceneView">applySceneView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#removeSceneView">removeSceneView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMapStatus">getMapStatus</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMap">getMap</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMapViewMap">getMapViewMap</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getSceneViewMap">getSceneViewMap</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getView">getView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getMapView">getMapView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#getSceneView">getSceneView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#bind2D_3D">bind2D_3D</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#switchView">switchView</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#addMapSwitchEvent">addMapSwitchEvent</a></li><li data-type='method' style='display: none;'><a href="ViewUtil.html#removeMapSwitchEvent">removeMapSwitchEvent</a></li></ul></li><li></li><li><a href="OverViewUtil.html">OverViewUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="OverViewUtil.html#updateOverview">updateOverview</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#updateOverviewExtent">updateOverviewExtent</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#remove">remove</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#switchOverview">switchOverview</a></li><li data-type='method' style='display: none;'><a href="OverViewUtil.html#getOverViewMapId">getOverViewMapId</a></li></ul></li><li></li><li><a href="ScaleBarUtil.html">ScaleBarUtil</a><ul class='methods'><li data-type='method' style='display: none;'><a href="ScaleBarUtil.html#defaultStyle">defaultStyle</a></li><li data-type='method' style='display: none;'><a href="ScaleBarUtil.html#remove">remove</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-arcgisTools.html">arcgisTools</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-arcgisTools.html#~loadAPI">loadAPI</a></li></ul></li><li><a href="module-layer_layerManage.html">layer/layerManage</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~switchLayers">switchLayers</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~switchLayer">switchLayer</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~lazyLoadingLayer">lazyLoadingLayer</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyLayerByUrl">applyLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyLayerByConfig">applyLayerByConfig</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyMapImageLayerByUrl">applyMapImageLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyMapImageLayerByConfig">applyMapImageLayerByConfig</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyTileLayerByUrl">applyTileLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyTileLayerByConfig">applyTileLayerByConfig</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyElevationLayerByUrl">applyElevationLayerByUrl</a></li><li data-type='method' style='display: none;'><a href="module-layer_layerManage.html#~applyElevationLayerByConfig">applyElevationLayerByConfig</a></li></ul></li><li><a href="module-view_viewManage.html">view/viewManage</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~flyToPosition3D">flyToPosition3D</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~flyToPoint2D">flyToPoint2D</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~applyMapView">applyMapView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~removeMapView">removeMapView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~removeSceneView">removeSceneView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~applySceneView">applySceneView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMapStatus">getMapStatus</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMap">getMap</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMapViewMap">getMapViewMap</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getSceneViewMap">getSceneViewMap</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getView">getView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getMapView">getMapView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~getSceneView">getSceneView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~bind2D_3D">bind2D_3D</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~switchView">switchView</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~addMapSwitchEvent">addMapSwitchEvent</a></li><li data-type='method' style='display: none;'><a href="module-view_viewManage.html#~removeMapSwitchEvent">removeMapSwitchEvent</a></li></ul></li><li><a href="module-widgets_widgetsManage.html">widgets/widgetsManage</a><ul class='methods'><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~addScaleBar">addScaleBar</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~removeScaleBar">removeScaleBar</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~addOverview">addOverview</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~getOverViewMapId">getOverViewMapId</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~removeOverview">removeOverview</a></li><li data-type='method' style='display: none;'><a href="module-widgets_widgetsManage.html#~switchOverview">switchOverview</a></li></ul></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">Extend/echarts/echartLayer/EchartLayer.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>import echarts from 'echarts';
import  "echarts-gl"
import {viewManage} from "../../../view/viewManage";
import {esri} from "../../../api/esriAPI";
import {jsUtils} from "../../../jsUtils";
/**
 * Echarts图层
 * @class
 * */
export const EchartLayer = class {
  name = "EchartsglLayer";//名称
  view = null;//视图--2D/3D
  box = null;//用于存放echarts的DOM对象
  chart = null;//echart对象
  chartOption = null;//echart的option配置
  visible = true;//是否显示
  _curMapId = null;//当前的mapId
  _debounceTime =  200;//地图范围发生变化，延迟多久触发echarts更新
  /**
   * 构造函数
   * @param {String} mapId 地图的mapId
   * @param {Object} option echart的配置项
   * @param {Number} debounceTime 去抖动的时间
   */
  constructor(mapId, option,debounceTime = 200) {
    this._debounceTime = debounceTime
    let view = viewManage.getView(mapId);
    let status = viewManage.getMapStatus(mapId);
    this._curMapId = mapId + (status ? "_2D":"_3D");
    console.log(view,mapId);
    echarts.registerCoordinateSystem('arcgis', this.getE3CoordinateSystem(view));
    this.init(view, option);
  };

  /**
   * 初始化
   * @param  {Object} view arcgis的view对象
   * @param  {Object} option echart的配置项
   */
  init(view, option) {
    this.setBaseMap(view);
    this.createLayer();
    this.setChartOption(option);
  };

  /**
   * 存储view
   * @param  {Object} view arcgis的view对象
   */
  setBaseMap(view) {
    this.view = view;
  };

  /**
   * 存储echart的option,同时初始化echart
   * @param  {Object} option echart的配置项
   */
  setChartOption(option) {
    this.chartOption = option;
    this.setCharts();
  };

  /**
   * 是否显示
   * @param bool {Boolean} 是否显示
   */
  setVisible(bool) {
    if (!this.box || this.visible === bool) return;
    this.box.hidden = !bool;
    this.visible = bool;
    bool === true &amp;&amp; setCharts();
  };

  /**
   * 刷新开始
   */
  refreshBegin() {
    this.box.hidden = true;
  };

  /**
   * 刷新中
   */
  refreshing() {
    setCharts();
  };

  /**
   * 刷新结束
   */
  refreshEnd() {
    this.box.hidden = false;
  };

  /**
   * 事件的监听
   * @param eventName 事件名称
   * @param handler 响应
   * @param context 上下文
   */
  on(eventName, handler, context) {
    this.chart.on(eventName, handler, context);
  };

  /**
   * 移除事件的监听
   * @param eventName 事件名称
   * @param handler 响应
   * @param context 上下文
   */
  off(eventName, handler, context) {
    this.chart.off(eventName, handler, context);
  };
  map_ExtentChange_Listener = null;

  /**
   * 设置echarts
   */
  setCharts() {
    if (!this.visible) return;
    if (this.chartOption == null || this.chartOption == 'undefined') return;
    let baseExtent = this.view.extent;
    //判断是否使用了mark类型标签，每次重绘要重新转换地理坐标到屏幕坐标
    //根据地图extent,重绘echarts
    this.chartOption.xAxis = {show: false, min: baseExtent.xmin, max: baseExtent.xmax};
    this.chartOption.yAxis = {show: false, min: baseExtent.ymin, max: baseExtent.ymax};
    this.chart.setOption(this.chartOption);
    this.chartOption.animation = false;
  };

  /**
   * 创建layer的容器，添加到map的layers下面
   */
  createLayer() {
    let box = this.box = document.createElement("div");
    box.setAttribute("id", "testData")
    box.setAttribute("name", "testData")
    box.style.width = this.view.width + 'px';
    box.style.height = this.view.height + 'px';
    box.style.position = "absolute";
    box.style.top = "0";
    box.style.left = "0";
    let viewDom = document.getElementById(this._curMapId);
    let parent = viewDom.getElementsByClassName("esri-view-surface")[0];
    parent.appendChild(box);
    this.chart = echarts.init(box);
    //this.setCharts();
    this.startMapEventListeners();
  };

  /**
   * 销毁实例
   */
  removeLayer() {
    this.box.outerHTML = "";
    this.view = null;
    this.box = null;
    this.originLyr = null;
    this.features = null;
    this.screenData = [];
    this.chart = null;
    this.chartOption = null;
    this.map_ExtentChange_Listener.remove();
  };

  /**
   * 监听地图事件，根据图层是否显示，判断是否重绘echarts
   */
  startMapEventListeners() {
    let view = this.view;
   this.map_ExtentChange_Listener = view.watch("extent", jsUtils.debounce(function () {
     if (!this.visible) return;
     this.setCharts();
     this.chart.resize();
     this.box.hidden = false;
   }.bind(this),this._debounceTime));
  };

  /**
   * 获得echart和地图的坐标转换关系
   * @param map 地图对象
   * @returns {CoordSystem} echart和地图的坐标转换关系
   */
  getE3CoordinateSystem(map) {
    var CoordSystem = function CoordSystem(map) {
      this.map = map;
      this._mapOffset = [0, 0];
    };
    CoordSystem.create = function (ecModel) {
      ecModel.eachSeries(function (seriesModel) {
        if (seriesModel.get('coordinateSystem') === 'arcgis') {
          seriesModel.coordinateSystem = new CoordSystem(map);
        }
      });
    };
    CoordSystem.getDimensionsInfo = function () {
      return ['x', 'y'];
    };
    CoordSystem.dimensions = ['x', 'y'];
    CoordSystem.prototype.dimensions = ['x', 'y'];
    CoordSystem.prototype.setMapOffset = function setMapOffset(mapOffset) {
      this._mapOffset = mapOffset;
    }
    CoordSystem.prototype.dataToPoint = function dataToPoint(data) {
      var point = {
        type: "point",
        x: data[0],
        y: data[1],
        spatialReference: new esri.SpatialReference(4326)
      };
      var px = map.toScreen(point);
      var mapOffset = this._mapOffset;
      return [px.x - mapOffset[0], px.y - mapOffset[1]];
    }
    CoordSystem.prototype.pointToData = function pointToData(pt) {
      var mapOffset = this._mapOffset;
      var screentPoint = {
        x: pt[0] + mapOffset[0],
        y: pt[1] + mapOffset[1]
      };
      var data = map.toMap(screentPoint);
      return [data.x, data.y];
    };
    CoordSystem.prototype.getViewRect = function getViewRect() {
      return new graphic.BoundingRect(0, 0, this.map.width, this.map.height);
    };
    CoordSystem.prototype.getRoamTransform = function getRoamTransform() {
      return matrix.create();
    };
    return CoordSystem
  }

}
</code></pre>
        </article>
    </section>




    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sat May 11 2019 22:54:19 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>

<script src="scripts/search.js" defer></script>


<script src="scripts/collapse.js" defer></script>


</body>
</html>
